```vue
<template>
	<view class="container">
<!--    &lt;!&ndash; 顶部状态卡片 &ndash;&gt;
		<view class="status-card">
			<view class="status-info">
				<text class="status-title">我的预约</text>
				<text class="status-count">{{ myBookings.length }}个预约</text>
        <text class="weekly-status" v-if="weeklyBookingStatus.hasBooking">
          本周已预约: {{
            (weeklyBookingStatus.bookingInfo && (weeklyBookingStatus.bookingInfo.appointmentDate || weeklyBookingStatus.bookingInfo.date))
          }}
        </text>
			</view>
			<view class="status-actions">
				<button class="action-btn" @click="refreshData">刷新</button>
			</view>
    </view>-->
		<!-- 时间段选择 -->
		<view class="time-section">
			<view class="section-header">
				<text class="section-title">可预约时间段</text>
				<text class="section-subtitle">选择合适的时间进行小课辅导</text>
			</view>

			<!-- 日期选择 -->
			<view class="date-picker">
				<scroll-view class="date-scroll" scroll-x="true">
					<view class="date-list">
						<view class="date-item" :class="{ active: selectedDate === item.date }" v-for="item in dateList"
							:key="item.date" @click="selectDate(item.date)">
							<text class="date-day">{{ item.day }}</text>
							<text class="date-text">{{ item.date }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 时间段列表 -->
			<view class="time-list">
				<view class="time-list-header">
					<text class="list-title">可用时段</text>
          <text class="list-count">{{ getAvailableCount() }}个可用</text>
				</view>

        <!-- 预约限制提示 -->
        <view class="booking-limit-tip" v-if="weeklyLimitDisplay">
          <text class="limit-text">{{ weeklyLimitDisplay }}</text>
        </view>

				<view class="time-item" :class="{ 
						available: item.status === 'available',
						booked: item.status === 'booked',
						selected: selectedTime === item.id
					}" v-for="item in timeSlots" :key="item.id" @click="selectTimeSlot(item)">
					<view class="time-info">
						<text class="time-range">{{ item.startTime }} - {{ item.endTime }}</text>
						<text class="time-duration">{{ calculateDuration(item.startTime, item.endTime) }}分钟</text>
					</view>
					<view class="time-status">
						<text class="status-text" v-if="item.status === 'available'">可预约</text>
						<text class="status-text booked" v-else-if="item.status === 'booked'">已预约</text>
						<text class="status-text selected" v-else-if="selectedTime === item.id">已选择</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的预约列表 -->
		<view class="booking-section" v-if="activeBookings.length > 0">
			<view class="section-header">
				<text class="section-title">我的预约</text>
			</view>

			<view class="booking-list">
        <view class="booking-item" :class="{ 'cancelled': item.status === 'CANCELLED' }"
              v-for="item in activeBookings" :key="item.id">
					<view class="booking-info">
						<view class="booking-header">
							<view class="booking-time">
								<text class="time-label">预约时间</text>
                <text class="time-value">{{ item.formattedTime }}</text>
							</view>
						</view>
						<view class="booking-details">
							<view class="booking-remark" v-if="item.remark">
								<text class="remark-label">备注</text>
								<text class="remark-value">{{ item.remark }}</text>
							</view>
						</view>
					</view>
					<view class="booking-actions">
            <button class="cancel-btn" @click="cancelBooking(item.id)"
                    v-if="item.status !== 'CANCELLED'">取消预约</button>
            <text class="cancelled-text" v-else>已取消</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions" v-if="selectedTime">
			<button class="submit-btn" @click="openBookingModal">确认预约</button>
		</view>

		<!-- 预约确认弹窗 -->
		<view class="booking-modal" v-if="showBookingModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">确认预约</text>
					<view class="close-btn" @click="closeBookingModal">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<view class="booking-summary">
						<view class="summary-item">
							<text class="summary-label">预约时间</text>
							<text class="summary-value">{{ selectedDate }}
								{{ selectedTime.startTime }}-{{ selectedTime.endTime }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">课程类型</text>
							<text class="summary-value">小课辅导</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">备注</text>
							<input class="remark-input" v-model="bookingRemark" placeholder="请输入备注信息（可选）" />
						</view>
					</view>
				</view>

				<view class="modal-actions">
					<button class="cancel-btn" @click="closeBookingModal">取消</button>
					<button class="confirm-btn" @click="submitBooking">确认预约</button>
				</view>
			</view>
		</view>

		<!-- 预约成功弹窗 -->
		<view class="success-modal" v-if="showSuccessModal">
			<view class="modal-content">
				<view class="success-icon">✅</view>
				<text class="success-title">预约成功</text>
				<text class="success-desc">您的预约已成功提交！</text>
				<button class="confirm-btn" @click="closeSuccessModal">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		API_CONFIG,
		getApiUrl,
		apiRequest
	} from '@/config/api.js'
	export default {
		data() {
			return {
				selectedDate: '',
				selectedTime: null,
				bookingRemark: '',
				showBookingModal: false,
				showSuccessModal: false,
				dateList: [], // 改为动态生成
				timeSlots: [], // 只存储当前选中日期的时段
				allTimeSlots: [], // 存储所有时段，按日期筛选
      myBookings: [],
      weeklyLimitInfo: '', // 新增：用于存储预约限制提示信息
      weeklyBookingStatus: {
        hasBooking: false,
        bookingInfo: null
      } // 新增：本周预约状态
			}
		},
		onLoad() {
			console.log('页面加载，开始初始化');

			// 检查学生ID是否存在，支持多种存储方式
			let studentId = uni.getStorageSync('studentId')
			
			// 如果没有找到studentId，尝试从userInfo中获取
			if (!studentId) {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.student_id) {
					studentId = userInfo.student_id
				} else if (userInfo && userInfo.studentId) {
					studentId = userInfo.studentId
				} else if (userInfo && userInfo.id) {
					studentId = userInfo.id
				}
			}
			
			// 如果还是没有找到，尝试从其他可能的存储位置获取
			if (!studentId) {
				const loginInfo = uni.getStorageSync('loginInfo')
				if (loginInfo && loginInfo.studentId) {
					studentId = loginInfo.studentId
				} else if (loginInfo && loginInfo.id) {
					studentId = loginInfo.id
				}
			}
			
			if (!studentId) {
				console.log('未找到学生ID，将使用默认值进行测试')
				// 不再显示登录提示，因为我们会使用默认值
			} else {
				console.log('找到学生ID:', studentId)
			}

			this.initData()
			// 不再单独调用loadBookingList，因为initData中已经调用了fetchMyBookings
			console.log('初始化数据完成');
		},
		computed: {
			// 格式化预约时间显示
			formattedBookings() {
				if (!this.myBookings || !Array.isArray(this.myBookings) || this.myBookings.length === 0) {
					return []
				}
				
				console.log('格式化预约数据，数量:', this.myBookings.length)
				
				return this.myBookings.map(booking => {
					// 确保booking是对象
					if (!booking || typeof booking !== 'object') {
						console.log('跳过无效预约数据')
						return null
					}
					
					// 获取时间信息
					let date = booking.appointmentDate || booking.date || '未知日期'
					let startTime = booking.startTime || '00:00'
					let endTime = booking.endTime || '00:00'
					
					// 检查是否有timeSlot对象
					if (booking.timeSlot && typeof booking.timeSlot === 'object') {
						date = booking.timeSlot.date || date
						startTime = booking.timeSlot.startTime || startTime
						endTime = booking.timeSlot.endTime || endTime
					}
					
					return {
						...booking,
						date,
						startTime,
						endTime,
						formattedTime: `${date} ${startTime}-${endTime}`
					}
				}).filter(Boolean) // 过滤掉null值
			},
			// 只显示未取消的预约
			activeBookings() {
				return this.formattedBookings.filter(booking => booking.status !== 'CANCELLED')
			},
			// 预约限制提示信息
			weeklyLimitDisplay() {
				if (!this.weeklyLimitInfo) {
					return ''
				}
				return this.weeklyLimitInfo
			}
		},
		methods: {
			// 移除loadBookingList方法，使用fetchMyBookings代替
			calculateStats() {
				if (!this.myBookings || !Array.isArray(this.myBookings)) { // 修正：使用myBookings
					this.stats = { totalBookings: 0, todayBookings: 0 }
					return
				}

				const totalBookings = this.myBookings.length // 修正：使用myBookings
				const today = new Date().toISOString().split('T')[0]
				const todayBookings = this.myBookings.filter(booking => { // 修正：使用myBookings
					const bookingDate = booking.appointmentDate || booking.date
					return bookingDate === today
				}).length

				this.stats = {
					totalBookings,
					todayBookings
				}

				console.log('预约统计:', this.stats)
			},
			async initData() {
				console.log('开始初始化数据');
				const today = new Date()
				console.log('当前日期:', today);
				const todayStr = this.formatDate(today)
				console.log('格式化后的今天:', todayStr);
				// 生成未来7天日期
				this.dateList = Array.from({
					length: 7
				}, (_, i) => {
					const d = new Date()
					d.setDate(today.getDate() + i)
					const formattedDate = this.formatDate(d);
					console.log('生成日期:', formattedDate);
					return {
						date: formattedDate,
						day: this.getDayText(d.getDay())
					}
				})
				this.selectedDate = todayStr
				console.log('默认选中日期:', this.selectedDate);
				
				try {
					// 获取可预约时段
					console.log('开始获取可预约时段');
					await this.fetchAvailableTimeSlots()
					
					// 获取我的预约
					console.log('开始获取我的预约');
					await this.fetchMyBookings()

					// 检查预约限制
					console.log('检查预约限制');
					await this.checkWeeklyBookingLimit()

					// 获取本周预约状态
					console.log('获取本周预约状态');
					this.weeklyBookingStatus = await this.getWeeklyBookingStatus()
				} catch (e) {
					console.error('初始化数据出错:', e);
					// 显示错误提示
					uni.showToast({
						title: '加载数据失败，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				}

				console.log('加载时段数据');
				this.loadTimeSlots()
				console.log('初始化完成，dateList长度:', this.dateList.length);
			},
			async fetchAvailableTimeSlots() {
				try {
					console.log('开始获取可预约时段，日期:', this.selectedDate);
					
					// 确保使用正确的端点
					const endpoint = API_CONFIG.ENDPOINTS.TIME_SLOT;
					if (!endpoint) {
						throw new Error('TIME_SLOT endpoint is undefined');
					}
					
					const apiUrl = getApiUrl(endpoint) + '?date=' + this.selectedDate;
					console.log('API请求URL:', apiUrl);
					
					const res = await apiRequest({
						url: apiUrl,
						method: 'GET'
					})
					console.log('API响应:', res);
					if ((res.code === 200 || res.code === 0) && Array.isArray(res.data)) {
						console.log('获取到的时段数据:', res.data);
						this.allTimeSlots = res.data.map(slot => ({
							...slot,
							status: slot.status === 1 ? 'available' : (slot.status === 2 ? 'booked' :
								'other')
						}))
						console.log('转换后的时段数据:', this.allTimeSlots);
					} else {
						console.error('API返回错误或非数组数据:', res);
						this.allTimeSlots = [];
						uni.showToast({
							title: res.message || '无可用时段数据',
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('获取可预约时段异常:', e);
					this.allTimeSlots = [];
					uni.showToast({
						title: '获取可预约时段失败: ' + e.message,
						icon: 'none'
					})
				} finally {
					console.log('当前allTimeSlots长度:', this.allTimeSlots.length);
					this.loadTimeSlots();
				}
			},
			async fetchMyBookings() {
				try {
					// 获取学生ID，支持多种存储方式
					let studentId = uni.getStorageSync('studentId')
					
					// 如果没有找到studentId，尝试从userInfo中获取
					if (!studentId) {
						const userInfo = uni.getStorageSync('userInfo')
						if (userInfo && userInfo.student_id) {
							studentId = userInfo.student_id
						} else if (userInfo && userInfo.studentId) {
							studentId = userInfo.studentId
						} else if (userInfo && userInfo.id) {
							studentId = userInfo.id
						}
					}
					
					// 如果还是没有找到，尝试从其他可能的存储位置获取
					if (!studentId) {
						const loginInfo = uni.getStorageSync('loginInfo')
						if (loginInfo && loginInfo.studentId) {
							studentId = loginInfo.studentId
						} else if (loginInfo && loginInfo.id) {
							studentId = loginInfo.id
						}
					}
					
					// 如果仍然没有找到，使用默认值
					if (!studentId) {
						console.warn('fetchMyBookings: 未找到学生ID，使用默认值')
						studentId = 7
					}

					console.log('获取我的预约，学生ID:', studentId)
					
					// 直接使用API_CONFIG.ENDPOINTS.APPOINTMENT，不添加studentId参数
					// 后端应该从当前登录用户获取学生ID
					const requestUrl = getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT)
					console.log('请求URL:', requestUrl)
						
					const res = await apiRequest({
						url: requestUrl,
						method: 'GET'
					})

					console.log('我的预约响应:', res)
					
					// 直接将响应数据赋值给myBookings，不进行复杂处理
					if (res && (res.code === 200 || res.code === 0)) {
						console.log('数据格式正确，开始处理预约数据')
						
						// 直接使用响应数据
						if (Array.isArray(res.data)) {
							this.myBookings = res.data
						} else if (res.data) {
							// 如果不是数组但有数据，转为数组
							this.myBookings = [res.data]
						} else {
							this.myBookings = []
						}
						
						console.log('预约数据处理完成，数量:', this.myBookings.length)
					} else {
						console.log('无预约数据或数据格式错误:', res)
						this.myBookings = []
					}
				} catch (e) {
					console.error('获取预约记录失败:', e)
					console.error('错误详情:', e.message)
					this.myBookings = []
					
					// 显示友好的错误提示
					uni.showToast({
						title: '获取预约记录失败，请稍后重试',
						icon: 'none',
						duration: 2000
					})
				}
			},
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			getDayText(day) {
				return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day]
			},
			selectDate(date) {
				console.log('切换日期:', date);
				this.selectedDate = date
				this.selectedTime = null
				this.bookingRemark = ''
				// 重新获取该日期的时段数据
				this.fetchAvailableTimeSlots()
      // 重新检查预约限制
      this.checkWeeklyBookingLimit()
			},
			loadTimeSlots() {
				// 按日期筛选时段
				console.log('开始筛选时段，selectedDate:', this.selectedDate);
				console.log('筛选前allTimeSlots长度:', this.allTimeSlots.length);
				this.timeSlots = this.allTimeSlots.filter(slot => slot.date === this.selectedDate);
				console.log('筛选后timeSlots长度:', this.timeSlots.length);
				console.log('timeSlots数据:', this.timeSlots);
			},
			selectTimeSlot(item) {
				if (item.status === 'available') {
					this.selectedTime = item
					this.bookingRemark = ''
				}
			},
			openBookingModal() {
				if (!this.selectedTime) {
					uni.showToast({
						title: '请选择时间段',
						icon: 'none'
					})
					return
				}
				this.showBookingModal = true
			},
			closeBookingModal() {
				this.showBookingModal = false
				this.bookingRemark = ''
			},
			async refreshData() {
				uni.showLoading({
					title: '刷新中...'
				});
				
				try {
					// 重新获取时段数据
					await this.fetchAvailableTimeSlots();
					
					// 重新获取预约数据
					await this.fetchMyBookings();
					
					// 重新检查预约限制
					await this.checkWeeklyBookingLimit();
					
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});
				} catch (e) {
					console.error('刷新数据失败:', e);
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			async submitBooking() {
				if (!this.selectedTime) {
					uni.showToast({
						title: '请选择时间段',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '提交中...'
				})

				try {
					// 获取学生ID，支持多种存储方式
					let studentId = uni.getStorageSync('studentId')
					console.log('从studentId获取:', studentId)
					
					// 如果没有找到studentId，尝试从userInfo中获取
					if (!studentId) {
						const userInfo = uni.getStorageSync('userInfo')
						console.log('从userInfo获取:', userInfo)
						if (userInfo && userInfo.student_id) {
							studentId = userInfo.student_id
						} else if (userInfo && userInfo.studentId) {
							studentId = userInfo.studentId
						} else if (userInfo && userInfo.id) {
							studentId = userInfo.id
						}
					}
					
					// 如果还是没有找到，尝试从其他可能的存储位置获取
					if (!studentId) {
						const loginInfo = uni.getStorageSync('loginInfo')
						console.log('从loginInfo获取:', loginInfo)
						if (loginInfo && loginInfo.studentId) {
							studentId = loginInfo.studentId
						} else if (loginInfo && loginInfo.id) {
							studentId = loginInfo.id
						}
					}
					
					// 如果仍然没有找到，使用默认值（仅用于测试）
					if (!studentId) {
						console.warn('未找到学生ID，使用默认值')
						studentId = 7 // 临时使用默认值
					}
					
					console.log('最终使用的学生ID:', studentId)

        // 检查必要数据（这里不再抛出错误，因为我们有默认值）
        if (!studentId) {
          console.error('学生ID仍然未找到')
          studentId = 7 // 确保有值
        }

        if (!this.selectedTime.id) {
          throw new Error('时间段ID无效')
        }

        // 确保学生ID是数字格式，如果无效则使用默认值
        const finalStudentId = parseInt(studentId) || 7
        console.log('最终学生ID:', finalStudentId)

        // 检查一周预约限制
        const weeklyLimit = await this.checkWeeklyBookingLimit()
        if (!weeklyLimit.canBook) {
          throw new Error(weeklyLimit.message)
        }

        // 构建请求数据
        const requestData = {
          studentId: finalStudentId, // 使用处理后的学生ID
          timeSlotId: this.selectedTime.id,
          remark: this.bookingRemark || '',
          appointmentDate: this.selectedTime.date || this.selectedDate // 添加预约日期
        }

        // 确保日期格式正确 (YYYY-MM-DD)
        if (requestData.appointmentDate) {
          const date = new Date(requestData.appointmentDate)
          if (!isNaN(date.getTime())) {
            requestData.appointmentDate = date.toISOString().split('T')[0]
          }
        }

        console.log('提交预约数据:', requestData)
        console.log('请求URL:', getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT))
        console.log('选中的时间段:', this.selectedTime)
        console.log('学生ID类型:', typeof requestData.studentId)
        console.log('时间段ID类型:', typeof requestData.timeSlotId)

        // 验证数据格式
        const validation = this.validateBookingData(requestData)
        if (!validation.isValid) {
          throw new Error('数据验证失败: ' + validation.errors.join(', '))
        }

					const res = await apiRequest({
						url: getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT),
						method: 'POST',
          data: requestData
        })

        console.log('预约响应:', res)

					uni.hideLoading()

        // 检查响应格式，支持多种成功状态码
        if (res.code === 200 || res.code === 0 || res.status === 200) {
						this.showBookingModal = false
						this.showSuccessModal = true

          // 显示成功信息
          uni.showToast({
            title: '预约成功！',
            icon: 'success',
            duration: 2000
          })

          // 刷新数据
						await this.fetchAvailableTimeSlots()
						await this.fetchMyBookings()
						this.loadTimeSlots()

          // 重新检查预约限制
          await this.checkWeeklyBookingLimit()
					} else {
						uni.showToast({
							title: res.message || '预约失败',
            icon: 'none',
            duration: 3000
						})
					}
				} catch (e) {
        console.error('预约提交错误:', e)
					uni.hideLoading()
					uni.showToast({
          title: `预约失败: ${e.message || '未知错误'}`,
          icon: 'none',
          duration: 3000
					})
				}
			},
			closeSuccessModal() {
				this.showSuccessModal = false
			},
			async cancelBooking(id) {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消这个预约吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
              console.log('取消预约，ID:', id)

								const result = await apiRequest({
									url: getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT_CANCEL),
									method: 'POST',
									data: {
										appointmentId: id,
										cancelReason: '用户主动取消'
									}
								})

              console.log('取消预约响应:', result)

              if (result.code === 200 || result.code === 0 || result.status === 200) {
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									})

                // 更新本地预约状态为已取消
                const bookingIndex = this.myBookings.findIndex(booking => booking
                    .id === id)
                if (bookingIndex !== -1) {
                  this.myBookings[bookingIndex].status = 'CANCELLED'
                  console.log('本地预约状态已更新为已取消')
                }

                // 刷新数据
									await this.fetchAvailableTimeSlots()
									await this.fetchMyBookings()
									this.loadTimeSlots()

                // 重新检查预约限制
                await this.checkWeeklyBookingLimit()
								} else {
									uni.showToast({
										title: result.message || '取消失败',
                  icon: 'none',
                  duration: 3000
									})
								}
							} catch (e) {
              console.error('取消预约错误:', e)
								uni.showToast({
                title: `取消失败: ${e.message || '未知错误'}`,
                icon: 'none',
                duration: 3000
								})
							}
						}
					}
				})
			},
			calculateDuration(startTime, endTime) {
				if (!startTime || !endTime) {
					return 0;
				}
				
				try {
					// 处理时间格式，确保是 HH:MM 格式
					const formatTime = (time) => {
						if (typeof time === 'string') {
							// 如果是 HH:MM:SS 格式，只取前5位
							return time.substring(0, 5);
						}
						return time;
					};
					
					const start = formatTime(startTime);
					const end = formatTime(endTime);
					
					// 解析时间
					const [startHour, startMinute] = start.split(':').map(Number);
					const [endHour, endMinute] = end.split(':').map(Number);
					
					// 计算分钟差
					let duration = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
					
					// 如果结束时间小于开始时间，说明跨天了
					if (duration < 0) {
						duration += 24 * 60; // 加上一天的分钟数
					}
					
					return Math.max(0, Math.round(duration));
				} catch (error) {
					console.error('计算时长失败:', error);
					return 0;
				}
			},

    // 处理预约数据，补充时间段信息
    async processBookingData(bookings) {
      console.log('开始处理预约数据，数量:', bookings.length)
      const processedBookings = []

      // 缓存时间段信息，避免重复请求
      let timeSlotsCache = null

      for (const booking of bookings) {
        console.log('处理预约:', booking)
        
        // 确保booking是对象
        if (!booking || typeof booking !== 'object') {
          console.log('跳过无效预约数据')
          continue
        }
        
        let startTime = booking.startTime
        let endTime = booking.endTime
        let date = booking.appointmentDate || booking.date
        
        // 检查是否有timeSlot对象
        if (booking.timeSlot && typeof booking.timeSlot === 'object') {
          console.log('从timeSlot对象获取时间信息')
          startTime = booking.timeSlot.startTime || startTime
          endTime = booking.timeSlot.endTime || endTime
          date = booking.timeSlot.date || date
        }

        // 如果没有时间信息，尝试从timeSlot获取
        if ((!startTime || !endTime) && booking.timeSlotId) {
          console.log('尝试获取时间段信息，ID:', booking.timeSlotId)

          // 如果缓存中没有数据，先获取时间段列表
          if (!timeSlotsCache) {
            try {
              const res = await apiRequest({
                url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT),
                method: 'GET'
              })

              if ((res.code === 200 || res.code === 0) && res.data) {
                timeSlotsCache = Array.isArray(res.data) ? res.data : [res.data]
                console.log('获取到时间段缓存:', timeSlotsCache)
              }
            } catch (e) {
              console.error('获取时间段缓存失败:', e)
              timeSlotsCache = []
            }
          }

          // 从缓存中查找时间段信息
          if (timeSlotsCache && timeSlotsCache.length > 0) {
            const timeSlot = timeSlotsCache.find(slot => slot.id === booking.timeSlotId)
            if (timeSlot) {
              startTime = timeSlot.startTime || startTime
              endTime = timeSlot.endTime || endTime
              date = timeSlot.date || date
              console.log('从缓存获取到时间段信息:', timeSlot)
            }
          }
        }

        // 确保所有字段都有值
        const processedBooking = {
          id: booking.id || Math.random().toString(36).substring(2, 10),
          date: date || '未知日期',
          startTime: startTime || '00:00',
          endTime: endTime || '00:00',
          status: booking.status || 'PENDING',
          remark: booking.remark || '',
          studentId: booking.studentId,
          timeSlotId: booking.timeSlotId,
          rawData: booking
        }
        
        console.log('处理后的预约:', processedBooking)
        processedBookings.push(processedBooking)
      }

      console.log('处理完成，总数:', processedBookings.length)
      return processedBookings
    },
    // 格式化预约时间显示
    formatBookingTime(booking) {
      const date = booking.date || '未知日期'
      const startTime = booking.startTime || '00:00'
      const endTime = booking.endTime || '00:00'

      // 如果时间都是默认值，显示特殊提示
				if (startTime === '00:00' && endTime === '00:00') {
        return `${date} (时间信息待更新)`
      }

      let timeText = `${date} ${startTime}-${endTime}`

      // 添加状态显示
  /*    if (booking.status === 'CANCELLED') {
        timeText += ' (已取消)'
      } else if (booking.status === 'PENDING') {
        timeText += ' (待确认)'
      } else if (booking.status === 'CONFIRMED') {
        timeText += ' (已确认)'
      }*/

      return timeText
    },
    // 检查一周预约限制
    async checkWeeklyBookingLimit() {
      try {
        // 获取学生ID，支持多种存储方式
        let studentId = uni.getStorageSync('studentId')
        
        // 如果没有找到studentId，尝试从userInfo中获取
        if (!studentId) {
          const userInfo = uni.getStorageSync('userInfo')
          if (userInfo && userInfo.student_id) {
            studentId = userInfo.student_id
          } else if (userInfo && userInfo.studentId) {
            studentId = userInfo.studentId
          } else if (userInfo && userInfo.id) {
            studentId = userInfo.id
          }
        }
        
        // 如果还是没有找到，尝试从其他可能的存储位置获取
        if (!studentId) {
          const loginInfo = uni.getStorageSync('loginInfo')
          if (loginInfo && loginInfo.studentId) {
            studentId = loginInfo.studentId
          } else if (loginInfo && loginInfo.id) {
            studentId = loginInfo.id
          }
        }
        
        // 如果仍然没有找到，使用默认值
        if (!studentId) {
          console.warn('checkWeeklyBookingLimit: 未找到学生ID，使用默认值')
          studentId = 7
        }

        // 使用新的后端接口检查预约限制
        const res = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT_CHECK) +
              `?studentId=${studentId}&date=${this.selectedDate}`,
          method: 'GET'
        })

        console.log('预约限制检查响应:', res)

        if (res.code === 200 || res.code === 0) {
          const canBook = res.data === true

          if (canBook) {
            this.weeklyLimitInfo = '' // 清空提示
            return {
              canBook: true,
              message: '可以预约'
            }
          } else {
            this.weeklyLimitInfo = '您本周已预约一次，请下周再预约。'
            return {
              canBook: false,
              message: '您本周已预约一次，请下周再预约。'
            }
          }
        } else {
          // 如果新接口不可用，回退到原来的检查方式
          console.log('新接口不可用，使用原有检查方式')
          return await this.fallbackWeeklyBookingCheck()
        }
      } catch (e) {
        console.error('检查预约限制失败:', e)
        // 如果新接口失败，回退到原来的检查方式
        console.log('接口调用失败，使用原有检查方式')
        return await this.fallbackWeeklyBookingCheck()
      }
    },
    // 回退的预约限制检查方法（原有逻辑）
    async fallbackWeeklyBookingCheck() {
      try {
        // 获取学生ID，支持多种存储方式
        let studentId = uni.getStorageSync('studentId')
        
        // 如果没有找到studentId，尝试从userInfo中获取
        if (!studentId) {
          const userInfo = uni.getStorageSync('userInfo')
          if (userInfo && userInfo.student_id) {
            studentId = userInfo.student_id
          } else if (userInfo && userInfo.studentId) {
            studentId = userInfo.studentId
          } else if (userInfo && userInfo.id) {
            studentId = userInfo.id
          }
        }
        
        // 如果还是没有找到，尝试从其他可能的存储位置获取
        if (!studentId) {
          const loginInfo = uni.getStorageSync('loginInfo')
          if (loginInfo && loginInfo.studentId) {
            studentId = loginInfo.studentId
          } else if (loginInfo && loginInfo.id) {
            studentId = loginInfo.id
          }
        }
        
        // 如果仍然没有找到，使用默认值
        if (!studentId) {
          console.warn('fallbackWeeklyBookingCheck: 未找到学生ID，使用默认值')
          studentId = 7
        }

        // 获取当前周的预约记录
        const res = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT) + '?studentId=' + studentId,
          method: 'GET'
        })

        if (res.code === 200 || res.code === 0) {
          const bookings = res.data || []

          // 获取当前周的起始和结束日期（以周一为开始）
          const now = new Date()
          const weekStart = new Date(now)
          const dayOfWeek = now.getDay()
          const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1 // 周日为0，需要特殊处理
          weekStart.setDate(now.getDate() - daysToMonday) // 设置为本周一
          weekStart.setHours(0, 0, 0, 0)

          const weekEnd = new Date(weekStart)
          weekEnd.setDate(weekStart.getDate() + 6) // 设置为本周日
          weekEnd.setHours(23, 59, 59, 999)

          // 统计本周的有效预约（不包括已取消的）
          const weeklyBookings = bookings.filter(booking => {
            const bookingDate = new Date(booking.appointmentDate || booking.date)
            return bookingDate >= weekStart &&
                bookingDate <= weekEnd &&
                booking.status !== 'CANCELLED'
          })

          console.log('本周预约数量:', weeklyBookings.length)
          console.log('本周范围:', weekStart.toISOString().split('T')[0], '到', weekEnd.toISOString().split(
              'T')[0])

          if (weeklyBookings.length >= 1) {
            this.weeklyLimitInfo = '您本周已预约一次，请下周再预约。'
            return {
              canBook: false,
              message: '您本周已预约一次，请下周再预约。'
            }
          }

          this.weeklyLimitInfo = '' // 清空提示
          return {
            canBook: true,
            message: '可以预约'
          }
        }

        return {
          canBook: false,
          message: '检查预约限制失败'
        }
      } catch (e) {
        console.error('回退检查预约限制失败:', e)
        return {
          canBook: false,
          message: '检查预约限制失败'
        }
      }
    },
    // 获取本周预约状态信息
    async getWeeklyBookingStatus() {
      try {
        // 获取学生ID，支持多种存储方式
        let studentId = uni.getStorageSync('studentId')
        
        // 如果没有找到studentId，尝试从userInfo中获取
        if (!studentId) {
          const userInfo = uni.getStorageSync('userInfo')
          if (userInfo && userInfo.student_id) {
            studentId = userInfo.student_id
          } else if (userInfo && userInfo.studentId) {
            studentId = userInfo.studentId
          } else if (userInfo && userInfo.id) {
            studentId = userInfo.id
          }
        }
        
        // 如果还是没有找到，尝试从其他可能的存储位置获取
        if (!studentId) {
          const loginInfo = uni.getStorageSync('loginInfo')
          if (loginInfo && loginInfo.studentId) {
            studentId = loginInfo.studentId
          } else if (loginInfo && loginInfo.id) {
            studentId = loginInfo.id
          }
        }
        
        // 如果仍然没有找到，使用默认值
        if (!studentId) {
          console.warn('getWeeklyBookingStatus: 未找到学生ID，使用默认值')
          studentId = 7
        }

        const res = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT) + '?studentId=' + studentId,
          method: 'GET'
        })

        if (res.code === 200 || res.code === 0) {
          const bookings = res.data || []

          // 获取当前周的起始和结束日期（以周一为开始）
          const now = new Date()
          const weekStart = new Date(now)
          const dayOfWeek = now.getDay()
          const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1
          weekStart.setDate(now.getDate() - daysToMonday)
          weekStart.setHours(0, 0, 0, 0)

          const weekEnd = new Date(weekStart)
          weekEnd.setDate(weekStart.getDate() + 6)
          weekEnd.setHours(23, 59, 59, 999)

          // 查找本周的有效预约
          const weeklyBooking = bookings.find(booking => {
            const bookingDate = new Date(booking.appointmentDate || booking.date)
            return bookingDate >= weekStart &&
                bookingDate <= weekEnd &&
                booking.status !== 'CANCELLED'
          })

          return {
            hasBooking: !!weeklyBooking,
            bookingInfo: weeklyBooking || null
          }
        }

        return {
          hasBooking: false,
          bookingInfo: null
								}
							} catch (e) {
        console.error('获取本周预约状态失败:', e)
        return {
          hasBooking: false,
          bookingInfo: null
        }
      }
    },
    // 验证预约数据
    validateBookingData(data) {
      const errors = []

      if (!data.studentId || isNaN(data.studentId)) {
        errors.push('学生ID无效')
      }

      if (!data.timeSlotId || isNaN(data.timeSlotId)) {
        errors.push('时间段ID无效')
      }

      if (!data.appointmentDate) {
        errors.push('预约日期不能为空')
      }

      return {
        isValid: errors.length === 0,
        errors: errors
      }
    },
    getAvailableCount() {
      const count = this.timeSlots.filter(item => item.status === 'available').length;
      console.log('可用时间段数量:', count);
      return count;
    },
    
    // 添加测试API连接的方法
    async testApiConnection() {
      try {
        // 测试API基础连接
        const testUrl = getApiUrl('/api/health');
        console.log('测试API连接:', testUrl);
        
        const res = await apiRequest({
          url: testUrl,
          method: 'GET'
        });
        
        console.log('API连接测试结果:', res);
        return true;
      } catch (e) {
        console.error('API连接测试失败:', e);
        return false;
      }
    },
    
    // 添加刷新数据的方法
    async refreshData() {
      uni.showLoading({
        title: '刷新中...'
      });
      
      try {
        // 重新获取时段数据
        await this.fetchAvailableTimeSlots();
        
        // 重新获取预约数据
        await this.fetchMyBookings();
        
        // 重新检查预约限制
        await this.checkWeeklyBookingLimit();
        
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
      } catch (e) {
        console.error('刷新数据失败:', e);
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 50%, #0B0F1A 100%);
		padding-bottom: 140rpx;
		position: relative;
		
		&::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: radial-gradient(circle at 20% 80%, rgba(25, 118, 210, 0.1) 0%, transparent 50%),
						radial-gradient(circle at 80% 20%, rgba(0, 184, 212, 0.1) 0%, transparent 50%);
			pointer-events: none;
			z-index: 0;
		}
	}

	.status-card {
		margin: 20rpx;
		padding: 32rpx;
		background: linear-gradient(135deg, #1976D2 0%, #2196F3 50%, #00B8D4 100%);
		border-radius: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 12rpx 40rpx rgba(25, 118, 210, 0.4);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
			animation: shimmer 3s ease-in-out infinite;
		}

		.status-info {
			position: relative;
			z-index: 1;
			
			.status-title {
				display: block;
				font-size: 34rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 10rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}

			.status-count {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				font-weight: 500;
			}

    .weekly-status {
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 8rpx;
      text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
    }
		}

		.action-btn {
			background: rgba(255, 255, 255, 0.25);
			border: 1rpx solid rgba(255, 255, 255, 0.4);
			color: #FFFFFF;
			font-size: 26rpx;
			padding: 14rpx 28rpx;
			border-radius: 24rpx;
			transition: all 0.3s ease;
			position: relative;
			z-index: 1;
			font-weight: 500;
			backdrop-filter: blur(10rpx);

			&:active {
				background: rgba(255, 255, 255, 0.4);
				transform: scale(0.95);
			}
		}
	}

	.time-section {
		margin: 24rpx 20rpx 0;
		position: relative;
		z-index: 1;

		.section-header {
			margin-bottom: 24rpx;
			padding: 0 4rpx;

			.section-title {
				display: block;
				font-size: 32rpx;
				color: #fff;
				font-weight: 700;
				margin-bottom: 8rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}

			.section-subtitle {
				font-size: 24rpx;
				color: #AAB4BE;
				font-weight: 400;
			}
		}
	}

	.date-picker {
		margin-bottom: 32rpx;

		.date-scroll {
			white-space: nowrap;

			.date-list {
				display: flex;
				padding: 0 12rpx;
				gap: 16rpx;

				.date-item {
					flex-shrink: 0;
					width: 120rpx;
					height: 120rpx;
					background: linear-gradient(135deg, #181d2a 0%, #23273a 100%);
					border-radius: 18rpx;
					margin-right: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border: 2rpx solid transparent;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
					transition: all 0.3s ease;
					position: relative;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);
						opacity: 0;
						transition: opacity 0.3s ease;
					}

					&.active {
						background: linear-gradient(135deg, #00B8D4 0%, #1976D2 50%, #2196F3 100%);
						border-color: #00B8D4;
						color: #fff;
						box-shadow: 0 8rpx 32rpx rgba(0, 184, 212, 0.3);
						transform: scale(1.08);
						
						&::before {
							opacity: 1;
						}
					}

					.date-day {
						font-size: 24rpx;
						color: #AAB4BE;
						margin-bottom: 6rpx;
						font-weight: 500;
						position: relative;
						z-index: 1;
					}

					.date-text {
						font-size: 28rpx;
						color: #fff;
						font-weight: 600;
						position: relative;
						z-index: 1;
					}
				}
			}
		}
	}

	.time-list {
		.time-list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
			padding: 0 12rpx;

			.list-title {
				font-size: 28rpx;
				color: #E8F4FD;
				font-weight: 700;
				text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
			}

			.list-count {
				font-size: 24rpx;
				color: #B8C5D1;
				font-weight: 500;
				background: rgba(76, 175, 80, 0.15);
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
				border: 1rpx solid rgba(76, 175, 80, 0.25);
			}
		}

  .booking-limit-tip {
    background: rgba(244, 67, 54, 0.1);
    border: 1rpx solid rgba(244, 67, 54, 0.25);
    border-radius: 16rpx;
    padding: 12rpx 20rpx;
    margin: 16rpx 12rpx;
    text-align: center;
    font-size: 24rpx;
    color: #EF5350;
    font-weight: 500;
    box-shadow: 0 4rpx 16rpx rgba(244, 67, 54, 0.1);
  }

		.time-item {
			background: linear-gradient(135deg, #181d2a 0%, #23273a 100%);
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			border: 2rpx solid #2a2f3e;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&.available {
				cursor: pointer;
				border-color: rgba(76, 175, 80, 0.3);

				&:hover {
					transform: translateY(-2rpx);
					box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.2);
					
					&::before {
						opacity: 1;
					}
				}

				&:active {
					background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
					color: #fff;
					transform: scale(0.98);
				}
			}

			&.booked {
				opacity: 0.6;
				background: linear-gradient(135deg, #23273a 0%, #2a2f3e 100%);
				border-color: rgba(244, 67, 54, 0.3);
			}

			&.selected {
				background: linear-gradient(135deg, #00B8D4 0%, #1976D2 50%, #2196F3 100%);
				border-color: #00B8D4;
				color: #fff;
				box-shadow: 0 8rpx 32rpx rgba(0, 184, 212, 0.3);
				transform: scale(1.02);
				
				&::before {
					opacity: 1;
				}
			}

			.time-info {
				flex: 1;
				position: relative;
				z-index: 1;

				.time-range {
					font-size: 30rpx;
					color: #E8F4FD;
					font-weight: 700;
					margin-bottom: 8rpx;
					display: block;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
				}

				.time-duration {
					font-size: 22rpx;
					color: #B8C5D1;
					font-weight: 500;
				}
			}

			.time-status {
				position: relative;
				z-index: 1;
				
				.status-text {
					font-size: 24rpx;
					font-weight: 600;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					background: rgba(76, 175, 80, 0.15);
					border: 1rpx solid rgba(76, 175, 80, 0.25);
					color: #81C784;

					&.booked {
						background: rgba(244, 67, 54, 0.15);
						border-color: rgba(244, 67, 54, 0.25);
						color: #EF5350;
					}

					&.selected {
						background: rgba(255, 255, 255, 0.15);
						border-color: rgba(255, 255, 255, 0.25);
						color: #E3F2FD;
					}

					&.available {
						background: rgba(76, 175, 80, 0.15);
						border-color: rgba(76, 175, 80, 0.25);
						color: #81C784;
					}
				}
			}
		}
	}

	.booking-section {
		margin: 32rpx 20rpx 0;
		position: relative;
		z-index: 1;

		.section-header {
			margin-bottom: 20rpx;
			padding: 0 4rpx;

			.section-title {
				font-size: 32rpx;
				color: #fff;
				font-weight: 700;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
		}
	}

	.booking-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;

		.booking-item {
    background: linear-gradient(135deg, #181d2a 0%, #23273a 100%);
    border-radius: 16rpx;
    padding: 24rpx;
    border: 2rpx solid #2a2f3e;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
    transition: all 0.3s ease;

			&:hover {
				transform: translateY(-2rpx);
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
			}

    &.cancelled {
      opacity: 0.6;
      background: linear-gradient(135deg, #23273a 0%, #2a2f3e 100%);
				border-color: rgba(244, 67, 54, 0.3);
				
      .booking-info {
        opacity: 0.6;
      }

      .booking-actions {
        .cancel-btn {
          background: rgba(244, 67, 54, 0.1);
          border: 1rpx solid rgba(244, 67, 54, 0.3);
          color: #f44336;
          font-size: 24rpx;
          padding: 10rpx 20rpx;
          border-radius: 16rpx;
          transition: all 0.3s ease;
          font-weight: 500;
          opacity: 0.6;

          &:active {
            background: rgba(244, 67, 54, 0.2);
            transform: scale(0.95);
          }
        }

        .cancelled-text {
          font-size: 24rpx;
          color: #f44336;
          font-weight: 600;
          padding: 10rpx 20rpx;
          border-radius: 16rpx;
          background: rgba(244, 67, 54, 0.1);
          border: 1rpx solid rgba(244, 67, 54, 0.3);
          opacity: 0.6;
        }
				}
			}

			.booking-info {
				flex: 1;

				.booking-header {
					.booking-time {
						.time-label {
							display: block;
							font-size: 22rpx;
							color: #B8C5D1;
							margin-bottom: 6rpx;
							font-weight: 500;
						}

						.time-value {
							font-size: 26rpx;
							color: #E8F4FD;
							font-weight: 600;
							text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
						}
					}
				}

				.booking-details {
					margin-top: 12rpx;
					
					.booking-remark {
						.remark-label {
							display: block;
							font-size: 22rpx;
							color: #B8C5D1;
							margin-bottom: 6rpx;
							font-weight: 500;
						}

						.remark-value {
							font-size: 24rpx;
							color: #E8F4FD;
							font-weight: 500;
							background: rgba(255, 255, 255, 0.08);
							padding: 8rpx 12rpx;
							border-radius: 8rpx;
						}
					}
				}
			}

			.booking-actions {
				.cancel-btn {
					background: rgba(244, 67, 54, 0.1);
					border: 1rpx solid rgba(244, 67, 54, 0.3);
					color: #f44336;
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					border-radius: 16rpx;
					transition: all 0.3s ease;
					font-weight: 500;

					&:active {
						background: rgba(244, 67, 54, 0.2);
						transform: scale(0.95);
					}
				}

      .cancelled-text {
					font-size: 24rpx;
        color: #f44336;
        font-weight: 600;
					padding: 10rpx 20rpx;
					border-radius: 16rpx;
        background: rgba(244, 67, 54, 0.1);
        border: 1rpx solid rgba(244, 67, 54, 0.3);
        opacity: 0.6;
				}
			}
		}
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 20rpx;
		background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
		border-top: 1rpx solid #2a2f3e;
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(20rpx);

		.submit-btn {
			width: 100%;
			height: 96rpx;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 50%, #2196F3 100%);
			border-radius: 48rpx;
			color: #FFFFFF;
			font-size: 34rpx;
			font-weight: 600;
			border: none;
			box-shadow: 0 12rpx 40rpx rgba(0, 184, 212, 0.4);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: -50%;
				right: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
				animation: shimmer 2s ease-in-out infinite;
			}

			&:active {
				transform: scale(0.96);
			}
		}
	}

	.booking-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		backdrop-filter: blur(10rpx);

		.modal-content {
			background: linear-gradient(135deg, #1a1f2e 0%, #23273a 100%);
			border-radius: 24rpx;
			padding: 60rpx 40rpx;
			text-align: center;
			margin: 40rpx;
			width: 90%;
			max-width: 600rpx;
			box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.5);
			border: 1rpx solid #2a2f3e;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: radial-gradient(circle at 20% 80%, rgba(25, 118, 210, 0.1) 0%, transparent 50%);
				pointer-events: none;
			}

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				position: relative;
				z-index: 1;

				.modal-title {
					font-size: 38rpx;
					color: #FFFFFF;
					font-weight: bold;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}

				.close-btn {
					font-size: 44rpx;
					color: #AAB4BE;
					padding: 12rpx;
					transition: all 0.3s ease;
					border-radius: 50%;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&:active {
						color: #FFFFFF;
						background: rgba(255, 255, 255, 0.1);
					}
				}
			}

			.modal-body {
				position: relative;
				z-index: 1;
				
				.booking-summary {
					display: flex;
					flex-direction: column;
					gap: 24rpx;
					margin-bottom: 40rpx;

					.summary-item {
						.summary-label {
							display: block;
							font-size: 30rpx;
							color: #AAB4BE;
							margin-bottom: 12rpx;
							font-weight: 500;
						}

						.summary-value {
							font-size: 34rpx;
							color: #FFFFFF;
							font-weight: 600;
							text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
						}

						.remark-input {
							width: 100%;
							height: 88rpx;
							background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
							border: 2rpx solid #3a3f4e;
							border-radius: 12rpx;
							padding: 24rpx;
							font-size: 30rpx;
							color: #FFFFFF;
							box-sizing: border-box;
							transition: all 0.3s ease;
							font-weight: 500;

							&:focus {
								border-color: #00B8D4;
								box-shadow: 0 0 20rpx rgba(0, 184, 212, 0.3);
								background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
							}
						}
					}
				}
			}

			.modal-actions {
				display: flex;
				justify-content: space-around;
				gap: 24rpx;
				position: relative;
				z-index: 1;

				.cancel-btn {
					flex: 1;
					height: 96rpx;
					background: rgba(244, 67, 54, 0.1);
					border: 2rpx solid rgba(244, 67, 54, 0.3);
					color: #f44336;
					font-size: 32rpx;
					font-weight: 600;
					border-radius: 48rpx;
					transition: all 0.3s ease;

					&:active {
						background: rgba(244, 67, 54, 0.2);
						transform: scale(0.95);
					}
				}

				.confirm-btn {
					flex: 1;
					height: 96rpx;
					background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
					border-radius: 48rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 600;
					border: none;
					box-shadow: 0 12rpx 40rpx rgba(25, 118, 210, 0.4);
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.95);
					}
				}
			}
		}
	}

	.success-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		backdrop-filter: blur(10rpx);

		.modal-content {
			background: linear-gradient(135deg, #1a1f2e 0%, #23273a 100%);
			border-radius: 24rpx;
			padding: 80rpx 40rpx;
			text-align: center;
			margin: 40rpx;
			box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.5);
			border: 1rpx solid #2a2f3e;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: radial-gradient(circle at 50% 50%, rgba(76, 175, 80, 0.1) 0%, transparent 70%);
				pointer-events: none;
			}

			.success-icon {
				font-size: 100rpx;
				margin-bottom: 40rpx;
				animation: bounce 0.8s ease;
				position: relative;
				z-index: 1;
			}

			.success-title {
				display: block;
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 24rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				position: relative;
				z-index: 1;
			}

			.success-desc {
				font-size: 30rpx;
				color: #AAB4BE;
				margin-bottom: 48rpx;
				font-weight: 500;
				position: relative;
				z-index: 1;
			}

			.confirm-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				border-radius: 48rpx;
				color: #FFFFFF;
				font-size: 34rpx;
				padding: 24rpx 80rpx;
				border: none;
				box-shadow: 0 12rpx 40rpx rgba(25, 118, 210, 0.4);
				transition: all 0.3s ease;
				font-weight: 600;
				position: relative;
				z-index: 1;

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}

	@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-15rpx);
		}

		60% {
			transform: translateY(-8rpx);
		}
	}

	@keyframes shimmer {

  0%,
  100% {
			transform: translateX(-100%) translateY(-100%) rotate(45deg);
		}

		50% {
			transform: translateX(100%) translateY(100%) rotate(45deg);
		}
	}

	@media (max-width: 500px) {

		.date-picker .date-item,
		.time-list .time-item,
		.booking-list .booking-item {
			padding: 12rpx 10rpx;
			font-size: 92%;
		}

		.date-picker .date-item {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
